<template>
    <div>
        <Modal v-model="show" title="更新用户"
               :mask-closable="false" :closable="false">
            <Form ref="modalForm" :model="data" :rules="ruls"
                  :label-width="80">
                <FormItem label="ID">
                    <Input disabled v-model.trim="data.uid"></Input>
                </FormItem>
                <FormItem label="用户名" prop="username">
                    <Input v-model.trim="data.username"></Input>
                </FormItem>
                <FormItem label="角色组" prop="roleList">
                    <CheckboxGroup v-model="data.roleList">
                        <Checkbox v-for="(item,index) in Allrole" :label="index" :key="item.rid">{{item.name}}</Checkbox>
                    </CheckboxGroup>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" :disabled="loading" @click="cancel(false)">取消</Button>
                <Button type="primary" :loading="loading" @click="ok">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {post, get} from '@/libs/request'

    export default {
        data() {
            return {
                show: true,
                loading: false,
                data: {
                    uid: 0,
                    username: "",
                    status: 1,
                    roleList: []
                },
                Allrole:[],
                ruls: {
                    username: [
                        {required: true, message: "用户名不能为空"},
                        {pattern: /^(\w){4,16}$/, message: '用户名应为[A-Za-z0-9_]组成的4-16位字符'}
                    ],
                    status: [{required: true, message: "用户状态不能为空"}],
                    roleList: [{required: true, message: "请至少选择一个角色"}]
                }
            };
        },
        props: {
            roles: {
                type: Array,
                default: []
            },
            updateObject: {
                type: Object,
                default: null
            },
        },
        created() {
            this.getUserInfo();
        },
        methods: {
            /**
             * @description 关闭Modal
             * @param reload 是否重新加载数据
             */
            cancel(reload = false) {
                this.$emit("cancel", "update", reload);
            },
            /**
             * @description 获取用户信息 回显用户的角色
             */
            getUserInfo() {
                try {
                    // 改为父组件传递过来
                    this.data.roleList = this.updateObject.roles;
                    this.Allrole = this.roles;
                    this.data.uid = this.updateObject.uid;
                    this.data.username = this.updateObject.username;
                    this.data.status = this.updateObject.status;


                    //进行角色的匹配
                    let roleList = [];
                    if (this.data.roleList != null) {
                        this.data.roleList.forEach(el => {
                            this.roles.forEach((r, index) => {
                                if (el.rid == r.rid) { //判断当前用户角色列表中的角色ID是否和全部角色列表中的对应
                                    roleList.push(index) //对应则加入当前角色的数组下标
                                }
                            })
                        })
                    }
                    this.data.roleList = roleList;
                } catch (error) {
                    console.log(error)
                }
            },
            /**
             * @description 确定按钮单击回调
             */
            ok() {
                this.$refs.modalForm.validate(valid => {
                    if (valid) {
                        let roles = [];
                        this.data.roleList.forEach(el => {
                            roles.push(this.roles[el]);
                        });
                        let data = JSON.parse(JSON.stringify(this.data));
                        data.roleList = roles;
                        this.update(data)
                    }
                });
            },
            /**
             * @description 更新用户数据请求
             */
            async update(data) {
                this.loading = true;
                try {
                    let rids = '';
                    for (let i = 0; i < data.roleList.length; i++) {
                        rids = rids + ',' + data.roleList[i].rid;
                    }
                    let res = await post('/user/update', {
                        uid: data.uid,
                        username: data.username,
                        rids: rids
                    });
                    if(res.data.code != 705){
                        this.$Message.destroy();
                        this.$Message.success("用户 " + this.updateObject.username + " 更新成功");
                    }
                    this.cancel(true)
                } catch (error) {
                    console.log(error)
                }
                this.loading = false;
            }
        }
    };
</script>

